<!-- 触底监听组件 -->
<template>
  <div
    ref="loadMoreEl"
    class="h-2px flex-shrink-0"
    :class="{
      'h-36px': isLoading
    }"
    v-loading="isLoading"
  >
  </div>
</template>

<script setup lang="ts">
import { useOnReachBottom } from './useOnReachBottom'
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['onReachBottom'])
const isReachBottom = ref(false)
const isLoading = computed(() => {
  if (!props.loading) {
    isReachBottom.value = false
  }
  return props.loading && isReachBottom.value
})
const loadMore = () => {
    if(!props.loading){
        isReachBottom.value = true
        emit('onReachBottom')
    }

}
const { loadMoreEl } = useOnReachBottom({ loadMore })
</script>

<style scoped></style>
